<html>
<head>
<title>Sprite SELECT - Prototype</title>
<link id="spriteselect-css" rel="stylesheet" type="text/css" href="style/spriteselect/spriteselect-100.css" />

<style type='text/css'>
body{
font-family: arial;
}
</style>
<% 
 String JS_PREFIX="";
String  JS_SELECT_PATH = "spriteselect"; 
%>

<script>
var _ss1,_ss2,_ss3;
function pageLoaded() {
  //alert('pageLoaded');
  var config1={className:'spriteselect',elements:[{key:0,val:0},{key:1,val:1},{key:2,val:2},{key:3,val:3}],def:1};
  var config2={className:'spriteselect',elements:[{key:0,val:'ZERO'},{key:1,val:'ONE'},{key:2,val:'TWO'},{key:3,val:'THREE'}],def:2};
  
  _ss1=new SpriteSelect('theselect-1', function(val) {alert("Select 1\nItem Selected "+val); }, config1 );
  _ss2=new SpriteSelect('theselect-2', function(val) {alert("Select 2\nItem Selected "+val); }, config2  );
  //_ss2.setEnabled(false);
  var config3={className:'spriteselect',elements:[{key:0,val:'JED'},{key:1,val:'ELLIEMAE'},{key:2,val:'JETHRO'},{key:3,val:'GRANNY'}],def:0};
  _ss3=new SpriteSelect('theselect-3', function(val) { ; }, config3  );
}
function clickster(el) {
  //alert('clickster');
}
</script>

</head>

<body onload="pageLoaded()">
<%--
<ul class='spriteselect'>
  <li class='spriteselect-disabled-0'><a href=''>0</a></li>
  <li class='spriteselect-1'><a href=''>1</a></li>
  <li class='spriteselect-disabled-2'><a href=''>2</a></li>
  <li class='spriteselect-disabled-3'><a href=''>3</a></li>
</ul>
--%>
 
Sprite-Based Select (<a href='http://code.google.com/p/sprite-select/'>sprite-select</a>)
<div style='position: relative; '>
<div id='theselect-1' onclick='clickster(this);' style='top: 0; position: absolute; width: 400px; padding: 0px; background-color: inherit; border: green thin solid'></div>
<div id='theselect-2' onclick='clickster(this);' style='top: 0; left: 440; position: absolute; width: 400px; padding: 0px; background-color: inherit; border: green thin solid'></div>
<div id='theselect-3' onclick='clickster(this);' style='top: 0; left: 920; position: absolute; width: 400px; padding: 0px; background-color: inherit; border: green thin solid'></div>

<div style='position: absolute; top: 110px; left: 20px'>
<button onclick="_ss1.toggle();">toggle-1</button>
<button onclick="alert(_ss1.getVal());">toggle-1 value</button>
<br/>
<button onclick="_ss1.setEnabled(!_ss1.isEnabled());var es=document.getElementById('_ss1EnabledState').innerHTML=_ss1.isEnabled()?'Y':'N';">toggle-1 enable state</button>
<span id='_ss1EnabledState'></span>
</div>
<div style='position: absolute; top: 110px; left: 450px;'>
<button onclick="_ss2.toggle();alert(_ss2.getVal());">toggle-2</button>
<button onclick="alert(_ss2.getVal());">toggle-2 value</button>
<br/>
<button onclick="_ss2.setEnabled(!_ss2.isEnabled());var es=document.getElementById('_ss2EnabledState').innerHTML=_ss2.isEnabled()?'Y':'N';">toggle-2 enable state</button>
<span id='_ss2EnabledState'></span>
</div>


</div>

<script type='text/javascript' src='<%= JS_PREFIX %>js/<%= JS_SELECT_PATH %>/spriteselect.js'></script>


</body>

</html>